<template>
  <div class="diy_list page_tourist_routes" id="tourist_routes_list">
    <div class="warp">
      <div class="container diy_list_container">
        <div class="diy_list_title">
          <div class="col">
            <span class="title">旅游路线列表</span>
          </div>
        </div>
        <div class="leis_box">
          <div class="iudis_box">

            <div class="row diy_list_search">
              <div class="col">
                <!-- 搜索栏 -->
                <div class="view Search">
                  <span class="diy_list_search_title">关键字搜索：</span>
                  <b-form-input size="sm" class="mr-sm-2" placeholder="路线编号搜索" v-model="query['route_number']"/>
                  <b-form-input size="sm" class="mr-sm-2" placeholder="路线起点搜索" v-model="query['starting_point_of_the_route']"/>
                  <b-form-input size="sm" class="mr-sm-2" placeholder="路线终点搜索" v-model="query['route_endpoint']"/>
                  <b-form-input size="sm" class="mr-sm-2" placeholder="旅游分类搜索" v-model="query['tourism_classification']"/>
                  <b-button size="sm" @click="search()">
                    <b-icon icon="search"/>
                  </b-button>
                </div>
                <!-- /搜索栏 -->
              </div>
            </div>
            <div class="diy_list_select_box">
              <span class="diy_list_select_title">下拉搜索：</span>
              <div class="diy_list_dropdown_box">
                <div class="col">
                  <!-- 筛选 -->
                  <div class="view sift">
                    <b-dropdown text="旅游分类" variant="outline-dark" left>
                      <b-dropdown-item @click="filter_set('全部','tourism_classification')">全部</b-dropdown-item>
                      <b-dropdown-item v-for="(o, i) in list_tourism_classification" :key="i" @click="filter_set(o['classification_name'],'tourism_classification')">
                        {{ o['classification_name'] }}
                      </b-dropdown-item>
                    </b-dropdown>
                    <!-- 排序 -->

                    <b-dropdown text="排序" variant="outline-dark" left>
                      <b-dropdown-item v-for="(o, i) in list_sort" :key="i" @click="set_sort(o)">
                        {{ o.name }}
                      </b-dropdown-item>
                    </b-dropdown>

                    <!--/排序 -->
                  </div>
                  <!-- /筛选 -->
                </div>
              </div>

            </div>
          </div>
          <div class="row diy_list_box">
            <div class="col">
              <!-- 列表 -->
              <list_tourist_routes :list="list"/>
              <!-- /列表 -->
            </div>
          </div>
        </div>
        <!-- 大盒子结尾 -->
        <div class="row diy_list_page_box">
          <div class="col overflow-auto flex_cc">
            <!-- 分页器 -->
            <!--						<diy_pager v-model="query['page']" :size="query['size']" :count="count" v-on:toPage="toPage" v-on:toSize="toSize" ></diy_pager>-->
            <b-pagination
                v-model="query.page"
                :total-rows="count"
                :per-page="query.size"
                @change="goToPage"
            />
            <!-- /分页器 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list_tourist_routes from "@/components/diy/list_tourist_routes.vue";
import diy_pager from "@/components/diy/diy_pager";
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  components: {
    diy_pager,
    list_tourist_routes,
  },
  data() {
    return {
      url_get_list: "~/api/tourist_routes/get_list?like=0",

      // 查询条件
      query: {
        keyword: "",
        page: 1,
        size: 12,
        "route_number": "", // 路线编号
        "starting_point_of_the_route": "", // 路线起点
        "route_endpoint": "", // 路线终点
        "tourism_classification": "", // 旅游分类
      },
      // 排序内容
      list_sort: [{
        name: "创建时间从高到低",
        value: "create_time desc",
      },
        {
          name: "创建时间从低到高",
          value: "create_time asc",
        },
        {
          name: "更新时间从高到低",
          value: "update_time desc",
        },
        {
          name: "更新时间从低到高",
          value: "update_time asc",
        },
        {
          name: "路线编号正序",
          value: "route_number asc",
        },
        {
          name: "路线编号倒序",
          value: "route_number desc",
        },
        {
          name: "路线起点正序",
          value: "starting_point_of_the_route asc",
        },
        {
          name: "路线起点倒序",
          value: "starting_point_of_the_route desc",
        },
        {
          name: "路线终点正序",
          value: "route_endpoint asc",
        },
        {
          name: "路线终点倒序",
          value: "route_endpoint desc",
        },
        {
          name: "旅游分类正序",
          value: "tourism_classification asc",
        },
        {
          name: "旅游分类倒序",
          value: "tourism_classification desc",
        },
      ],

      // 旅游分类列表
      "list_tourism_classification": [""],

    }
  },
  methods: {
    get_list_before(param) {
    },
    /**
     * 筛选选择
     */
    filter_set(o, key) {
      if (o == "全部") {
        this.query[key] = "";
      } else {
        this.query[key] = o;
      }
      this.search();
    },

    /**
     * 排序
     */
    set_sort(o) {
      this.query.orderby = o.value;
      this.search();
    },
    /**
     * 获取旅游分类列表
     */
    async get_list_tourism_classification() {
      var json = await this.$get("~/api/tourism_classification/get_list?");
      if (json.result) {
        this.list_tourism_classification = json.result.list;
      } else if (json.error) {
        console.log(json.error);
      }
    },
    /**
     * 筛选
     */
    filter_tourism_classification(o) {
      if (o == "全部") {
        this.query["tourism_classification"] = "";
      } else {
        this.query["tourism_classification"] = o;
      }
      this.search();
    },
    /**
     * 重置
     */
    reset() {
      this.query.route_number = ""
      this.query.starting_point_of_the_route = ""
      this.query.route_endpoint = ""
      this.query.tourism_classification = ""
      this.search();
    },

    // 返回条数
    toSize(i) {
      this.query.size = i;
      this.first();
    },

    // 返回页数
    toPage(i) {
      this.query.page = i;
      this.first();
    },

    goToPage(v) {
      this.query.page = v;
      this.goToNew(v)
    },

  },
  computed: {},
  created() {
    /**
     * 获取旅游分类列表
     */
    this.get_list_tourism_classification();
  }
}
</script>

<style>
</style>
